<template>
  <div>
    <el-popover
      v-if="text"
      placement="top-start"
      width="200"
      trigger="hover"
    >
      <el-row>
        <el-col :span="24" class="mb8">{{ text }}</el-col>
        <el-col :span="24" style="text-align: center;">
          <el-button size="small" @click="handleCopy(text)">复制</el-button>
        </el-col>
      </el-row>
      <el-button
        v-if="link"
        text
        type="primary"
        @click="$emit('click')"
      >
        {{ text }}
      </el-button>
      <el-link v-else type="text">{{ text }}</el-link>
    </el-popover>
    <div class="copy_container">
      <input
        ref="copy"
        text
        type="primary"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { ElButton, ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  link: {
    type: Boolean,
    default: true,
  },
})
const handleCopy = (text) => {
  const copy = proxy.$refs.copy
  copy.value = props.text.value
  copy.select()
  document.execCommand('Copy')
  ElMessage.success('复制成功')
}
</script>

<style lang="less" scoped>
.copy_container {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
/deep/ .el-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  &:hover {
    color: #409eff;
  }
}
</style>